<!--
  * 前台类目
  *
  * @Author:    jabari
  * @Date:      2023-06-01 15:12:18
  * @Copyright  51dev.cn
-->
<template>
    <a-drawer
      :title="form.frontCategoryId ? '编辑' : '添加'"
      width="600"
      :visible="visibleFlag"
      @cancel="onClose"
      :maskClosable="false"
      :destroyOnClose="true"
    >
        <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }" >
    
            <a-form-item label="前台类目名称"  name="frontCategoryName">
                <a-input style="width: 100%" v-model:value="form.frontCategoryName" placeholder="前台类目名称" />
            </a-form-item>

            <a-form-item label="后台类目映射"  name="categoryIds">
            <CategoryTree v-model:value="form.categoryIds" placeholder="请选择商品分类" :categoryType="CATEGORY_TYPE_ENUM.GOODS.value" multiple="true" />
            </a-form-item>
    

        </a-form>

        <template #footer>
            <a-space>
                <a-button @click="onClose">取消</a-button>
                <a-button type="primary" @click="onSubmit">保存</a-button>
            </a-space>
        </template>
    </a-drawer>
</template>
<script setup>
    import { reactive, ref, nextTick } from 'vue';
    import _ from 'lodash';
    import { message } from 'ant-design-vue';
    import { SmartLoading } from '/@/components/framework/smart-loading';
    import { frontCategoryApi } from '/@/api/business/category/front-category-api';
    import { smartSentry } from '/@/lib/smart-sentry';
    import CategoryTree from '/@/components/business/category-tree-select/index.vue';
    import { CATEGORY_TYPE_ENUM } from '/@/constants/business/erp/category-const';


    // ------------------------ 事件 ------------------------

    const emits = defineEmits(['reloadList']);

    // ------------------------ 显示与隐藏 ------------------------
    // 是否显示
    const visibleFlag = ref(false);

    function show(rowData) {
        Object.assign(form, formDefault);
        if (rowData && !_.isEmpty(rowData)) {
            Object.assign(form, rowData);
        }
        visibleFlag.value = true;
        nextTick(() => {
            formRef.value.clearValidate();
        });
    }

    function onClose() {
        Object.assign(form, formDefault);
        visibleFlag.value = false;
    }

    // ------------------------ 表单 ------------------------

    // 组件ref
    const formRef = ref();

    const formDefault = {
        frontCategoryId: undefined,
        frontCategoryName: undefined, //前台类目名称
    };

    let form = reactive({ ...formDefault });

    const rules = {
        frontCategoryName: [{ required: true, message: '前台类目名称 必填' }],
        categoryIds: [{ required: true, message: '商品分类 必填' }],

    };

    // 点击确定，验证表单
    async function onSubmit() {
        try {
            await formRef.value.validateFields();
            save();
        } catch (err) {
            message.error('参数验证错误，请仔细填写表单数据!');
        }
    }

    // 新建、编辑API
    async function save() {
        SmartLoading.show();
        try {
            if (form.frontCategoryId) {
                await frontCategoryApi.update(form);
            } else {
                await frontCategoryApi.add(form);
            }
            message.success('操作成功');
            emits('reloadList');
            onClose();
        } catch (err) {
            smartSentry.captureError(err);
        } finally {
            SmartLoading.hide();
        }
    }

    defineExpose({
        show,
    });
</script>
